<template>
    <div
        class="h-full flex flex-col justify-evenly items-center cursor-default"
    >
        <div
            class="
                avater
                h-20
                w-20
                bg-gray-200
                flex
                justify-center
                items-center
                relative
                rounded-full
            "
        >
            <img
                class="rounded-full"
                :src="
                    userInfo.avatarUrl ||
                    'https://portrait.gitee.com/uploads/avatars/user/1780/5342313_dongzhongzhidong_1604048676.png!avatar200'
                "
                alt=""
                srcset=""
            />
            <div
                class="
                    gender
                    Icon
                    absolute
                    bottom-1
                    right-1
                    bg-gray-200
                    rounded-full
                "
            >
                {{ gender }}
            </div>
        </div>
        <div class="nickname text-xl">
            {{ userInfo.nickName || userInfo.email }}
        </div>
        <div class="email text-sm">{{ userInfo.email }}</div>

        <div
            class="
                btn
                bg-blue-500
                text-white
                w-1/3
                float-left
                text-center
                rounded
                p-2
                transition
                cursor-pointer
                hover:bg-blue-400
            "
            @click="SignOut"
        >
            退出登录
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
    methods: {
        ...mapActions(["SignOut"]),
    },
    watch: {
        "$store.state.user.user.info"(info) {
            if (!info) this.$router.push({ name: "Login" });
        },
    },
    computed: {
        ...mapState({
            userInfo: (state) => state.user.user.info,
        }),
        gender() {
            switch (this.userInfo.gender) {
                case "MALE":
                    return "male";
                case "FEMALE":
                    return "female";
                default:
                    return "help_outline";
            }
        },
    },
    mounted() {
        console.log(this.userInfo);
    },
};
</script>

<style lang="less" scoped></style>
